<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Alternate Skins</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Alternate Skins</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
    #demo .light {
        padding: 1em;
    }
    #demo .dark {
        background: #000;
        padding: 1em;
    }
    #demo {
        overflow: hidden;
    }
    /* needed for the chromeless version */
    #demo h4 {
        font-weight: normal;
        color: #FF8800;
    }
    #demo h5 {
        margin-top: 1em;
        text-transform: uppercase;
        color: #666;
        border-bottom: 1px solid #D9D9D9;
    }
</style>

<div class="intro">
    <p>This example demonstrates the alternate skins available for Slider, and how to apply them.</p>
</div>

<div class="example">
    <div id="demo">
    <div class="yui3-g">
        <div class="yui3-u-1-2">
            <div class="light">
                <h4>Light skins</h4>
                <div class="yui3-skin-sam">
                    <h5>Sam skin</h5>
                    <div id="sam"></div>
                </div>

                <div class="yui3-skin-capsule">
                    <h5>Capsule skin</h5>
                    <div id="capsule"></div>
                </div>

                <div class="yui3-skin-round">
                    <h5>Round skin</h5>
                    <div id="round"></div>
                </div>

                <div class="yui3-skin-audio-light">
                    <h5>Audio skin (light)</h5>
                    <div id="audio_light"></div>
                </div>
            </div>
        </div>
        <div class="yui3-u-1-2">
            <div class="dark">
                <h4>Dark skins</h4>
                <div class="yui3-skin-sam-dark">
                    <h5>Sam skin (dark)</h5>
                    <div id="sam_dark"></div>
                </div>

                <div class="yui3-skin-capsule-dark">
                    <h5>Capsule skin (dark)</h5>
                    <div id="capsule_dark"></div>
                </div>

                <div class="yui3-skin-round-dark">
                    <h5>Round skin (dark)</h5>
                    <div id="round_dark"></div>
                </div>

                <div class="yui3-skin-audio">
                    <h5>Audio skin</h5>
                    <div id="audio"></div>
                </div>
            </div>
        </div>
    </div>
</div>

    <script>
YUI({
    skin: {
        overrides: {
            'slider-base': [
                'sam',          // The default skin
                'sam-dark',     // Suited for dark backgrounds

                'capsule',      // You only need to include one skin
                'capsule-dark', // in the overrides section unless you
                                // are using multiple skins on the same page
                'round',
                'round-dark',

                'audio-light',
                'audio'
            ]
        }
    }
}).use('slider', function ( Y ) {

    new Y.Slider().render( '#sam' );
    new Y.Slider().render( '#sam_dark' );

    new Y.Slider().render( '#capsule' );
    new Y.Slider().render( '#capsule_dark' );

    new Y.Slider().render( '#round' );
    new Y.Slider().render( '#round_dark' );

    new Y.Slider().render( '#audio_light' );
    new Y.Slider().render( '#audio' );

} );
</script>

</div>

<h3>Specify the skin in the YUI config</h3>
<p>
    To access alternate skins for a component, specify an override in the YUI
    configuration.  The "slider" module is actually a virtual rollup of other
    modules, so you need to override the skin for "slider-base".
</p>

<p>Then just <code>use(&quot;slider&quot;)</code> as you normally would.</p>

<pre class="code prettyprint">YUI({
    skin: {
        overrides: {
            &quot;slider-base&quot;: [ &quot;capsule&quot; ]
        }
    }
}).use( &quot;slider&quot;, function (Y) {
    ...
});</pre>


<h3>Use the appropriate skin class in the markup</h3>
<p>
    The default skin is the Sam skin.  Style YUI components with this skin by
    including the class <code>yui3-skin-sam</code> in the class list of an element that
    contains the component.  Typically, setting <code>&lt;body class=&quot;yui3-skin-sam&quot;&gt;</code>
    is good enough.
</p>

<p>
    When overriding the default skin, use a different class on the containing
    element.
</p>

<pre class="code prettyprint">&lt;div class=&quot;yui3-skin-round-dark&quot;&gt;
    &lt;h5&gt;Round skin (dark)&lt;&#x2F;h5&gt;
    &lt;div id=&quot;round_dark&quot;&gt;&lt;!-- Slider rendered here --&gt;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<h3 id="full_code_listing">Full Code Listing</h3>
<p>This is the full code listing for this example.</p>

<h4>Markup</h4>
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
    &lt;div class=&quot;yui3-g&quot;&gt;
        &lt;div class=&quot;yui3-u-1-2&quot;&gt;
            &lt;div class=&quot;light&quot;&gt;
                &lt;h4&gt;Light skins&lt;&#x2F;h4&gt;
                &lt;div class=&quot;yui3-skin-sam&quot;&gt;
                    &lt;h5&gt;Sam skin&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;sam&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-capsule&quot;&gt;
                    &lt;h5&gt;Capsule skin&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;capsule&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-round&quot;&gt;
                    &lt;h5&gt;Round skin&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;round&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-audio-light&quot;&gt;
                    &lt;h5&gt;Audio skin (light)&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;audio_light&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;
            &lt;&#x2F;div&gt;
        &lt;&#x2F;div&gt;
        &lt;div class=&quot;yui3-u-1-2&quot;&gt;
            &lt;div class=&quot;dark&quot;&gt;
                &lt;h4&gt;Dark skins&lt;&#x2F;h4&gt;
                &lt;div class=&quot;yui3-skin-sam-dark&quot;&gt;
                    &lt;h5&gt;Sam skin (dark)&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;sam_dark&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-capsule-dark&quot;&gt;
                    &lt;h5&gt;Capsule skin (dark)&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;capsule_dark&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-round-dark&quot;&gt;
                    &lt;h5&gt;Round skin (dark)&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;round_dark&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;

                &lt;div class=&quot;yui3-skin-audio&quot;&gt;
                    &lt;h5&gt;Audio skin&lt;&#x2F;h5&gt;
                    &lt;div id=&quot;audio&quot;&gt;&lt;&#x2F;div&gt;
                &lt;&#x2F;div&gt;
            &lt;&#x2F;div&gt;
        &lt;&#x2F;div&gt;
    &lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<h4>JavaScript</h4>
<pre class="code prettyprint">&lt;script&gt;
YUI({
    skin: {
        overrides: {
            &#x27;slider-base&#x27;: [
                &#x27;sam&#x27;,          &#x2F;&#x2F; The default skin
                &#x27;sam-dark&#x27;,     &#x2F;&#x2F; Suited for dark backgrounds

                &#x27;capsule&#x27;,      &#x2F;&#x2F; You only need to include one skin
                &#x27;capsule-dark&#x27;, &#x2F;&#x2F; in the overrides section unless you
                                &#x2F;&#x2F; are using multiple skins on the same page
                &#x27;round&#x27;,
                &#x27;round-dark&#x27;,

                &#x27;audio-light&#x27;,
                &#x27;audio&#x27;
            ]
        }
    }
}).use(&#x27;slider&#x27;, function ( Y ) {

    new Y.Slider().render( &#x27;#sam&#x27; );
    new Y.Slider().render( &#x27;#sam_dark&#x27; );

    new Y.Slider().render( &#x27;#capsule&#x27; );
    new Y.Slider().render( &#x27;#capsule_dark&#x27; );

    new Y.Slider().render( &#x27;#round&#x27; );
    new Y.Slider().render( &#x27;#round_dark&#x27; );

    new Y.Slider().render( &#x27;#audio_light&#x27; );
    new Y.Slider().render( &#x27;#audio&#x27; );

} );
&lt;&#x2F;script&gt;</pre>


</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="The basics of setting up a horizontal and vertical Slider">
                                        <a href="slider-basic.html">Basic Sliders</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a vertical Slider from existing markup">
                                        <a href="slider-from-markup.html">Creating a Slider from Existing Markup</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Specifying an alternate skin for a Slider instance">
                                        <a href="slider-skin.html">Alternate Skins</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to use Overlay&#x27;s constrainment support, to limit the XY value which can be set for an Overlay.">
                                        <a href="../overlay/overlay-constrain.html">Constrain Support</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
                                        <a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
